<template>
  <div class="hello">
    <div v-for="(config, index) in configJsonArr" :key="config.type + index">
      <!-- 动态组件，根据配置中的 Type 来决定调用的是 Input 还是 Select -->
      <component :is="config.type" :configProps="config.props"></component>
      <!-- <comp-form-item :configJson="config" v-model="config.value"></comp-form-item> -->
    </div>
  </div>
</template>

<script>
import Input from './input'
import Select from './select'

// const CompFormItem = {
//   components: {
//     Input, Select
//   },
//   name: 'FormItem',
//   props: {
//     configJson: {
//       required: true
//     }
//   },
//   // 渲染函数
//   render (h) {
//     return h(`${this.configJson.type}`, {
//       props: {
//         ...this.configJson.props || {}
//       },
//       attrs: {
//         ...this.configJson.props || {}
//       }
//     })
//   }
// }

export default {
  name: 'Config',
  components: {
    Input,
    Select
    // CompFormItem
  },
  props: {
    configJsonArr: {
      type: Array,
      required: true,
      default: () => []
    }
  }
}
</script>
